<template>
  <div id="EquipmentOEEManagementReport">
    <h2 style="text-align: center">A设备OEE管理看板</h2>
    <div class="row-1 gradient-border">
      <div class="row-1-left">
        <div id="DailyReport" ref="DailyReportCom"></div>
      </div>
      <div class="row-1-right">
        <div id="HourlyReport" ref="HourlyReportCom"></div>
      </div>
    </div>
    <div class="row-2">
      <div class="row-2-left gradient-border">
        <h2 style="text-align: center">时间稼动率</h2>
        <div class="CropTurnoverRateChartBox">
          <div class="StoppageTimeAnalysisLeft" ref="StoppageTimeAnalysisLeftCom"
               style="width: 50%;height: 100%"></div>
          <div class="StoppageTimeAnalysisRight" ref="StoppageTimeAnalysisRightCom"
               style="width: 50%;height: 100%"></div>
        </div>
      </div>
      <div class="row-2-right gradient-border">
        <h2 style="text-align: center">{{ PerformanceOEE.title }}</h2>
        <div class="PerformanceOEE-detailBox">
          <div class="PerformanceOEE-detailBox-left">
            <div v-for="(item,index) in PerformanceOEE.left" :key="index">
              <span class="performance-header">{{ item.label }}</span>
              <span>{{ item.value }}</span>
            </div>
          </div>
          <div class="PerformanceOEE-detailBox-right">
            <!--            <div v-for="item in PerformanceOEE.right">-->
            <!--              <span class="performance-header">{{ item.label }}</span>-->
            <!--              <span>{{ item.value }}</span>-->
            <!--            </div>-->
            <div style="display: flex;flex-direction: column;">
              <div class="performance-header" style="display: inline-block;text-align:right">{{
                  PerformanceOEE.right.APerformance.label
                }}
              </div>
              <div>
                <div class="performance-header"
                     style="display: inline-block;text-align:right">{{ PerformanceOEE.right.performance1.label }}
                </div>
                <div class="performance-header">{{ PerformanceOEE.right.performance1.value }}</div>
              </div>
            </div>

            <div style="display: flex;flex-direction: column">
              <span class="performance-header" style="display: inline-block;text-align:right">{{
                  PerformanceOEE.right.IPerformance.label
                }}</span>
              <div>
                <div class="performance-header"
                     style="display: inline-block;text-align:right">{{ PerformanceOEE.right.performance2.label }}
                </div>
                <div class="performance-header">{{ PerformanceOEE.right.performance2.value }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from "echarts";
import {DailyReport, HourlyReport, StoppageTimeAnalysisLeft, StoppageTimeAnalysisRight} from './mock'


const PerformanceOEE = ref({
  title: '性能稼动率',
  left: {
    time: {
      label: "稼动时间",
      value: "180min(实时)"
    },
    TCapacity: {
      label: "理论产能",
      value: "720"
    },
    ACapacity: {
      label: "实际产能",
      value: "500(实时)"
    },
    TheoreticalCT: {
      label: "理论CT",
      value: "15s"
    },
    ActualCT: {
      label: "实际CT",
      value: "58s"
    },
  },
  right: {
    APerformance: {
      label: "累计性能",
      value: ""
    },
    performance1: {
      label: "稼动率",
      value: "69%"
    },
    IPerformance: {
      label: "瞬时性能",
      value: ""
    },
    performance2: {
      label: "稼动率",
      value: "26%"
    },
  }
})
const DailyReportCom = ref(null)
const HourlyReportCom = ref(null)
const StoppageTimeAnalysisLeftCom = ref(null)
const StoppageTimeAnalysisRightCom = ref(null)


const initDailyReportCom = () => {
  let myChart = echarts.init(DailyReportCom.value);
  DailyReport && myChart.setOption(DailyReport);
}
const initHourlyReportCom = () => {
  let myChart = echarts.init(HourlyReportCom.value);
  HourlyReport && myChart.setOption(HourlyReport);
}

const initStoppageTimeAnalysisLeftCom = () => {
  let myChart = echarts.init(StoppageTimeAnalysisLeftCom.value);
  StoppageTimeAnalysisLeft && myChart.setOption(StoppageTimeAnalysisLeft);
}

const initStoppageTimeAnalysisRightCom = () => {

  let myChart = echarts.init(StoppageTimeAnalysisRightCom.value);
  StoppageTimeAnalysisLeft && myChart.setOption(StoppageTimeAnalysisRight);

}
onMounted(() => {
  setTimeout(() => {
    initDailyReportCom()
    initHourlyReportCom()
    initStoppageTimeAnalysisLeftCom()
    initStoppageTimeAnalysisRightCom()
  }, 100)
});
</script>

<style scoped>
#EquipmentOEEManagementReport {
  height: 100vh;
  width: 100vw;


  .gradient-border {
    width: 200px;
    height: 100px;
    border: 6px solid;
    border-image: linear-gradient(#ccd9f1, #095bb7) 20;
  }

  .row-1 {
    width: 98%;
    margin: auto;
    height: calc(40% - 12px);
    display: flex;

    .row-1-left {
      display: flex;
      width: 50%;
      justify-content: center;
      align-items: center;
      height: 100%;

      border: 1px solid #ddd;

      #DailyReport {
        width: 100%;
        height: 90%;
        margin: auto 0;
      }
    }

    .row-1-right {
      display: flex;
      width: 50%;
      justify-content: center;
      align-items: center;
      height: 100%;
      border: 1px solid #ddd;

      #HourlyReport {
        width: 100%;
        height: 90%;
        margin: auto 0;
      }
    }
  }

  .row-2 {
    width: 98%;
    margin: 10px auto;
    height: calc(55% - 12px);
    display: flex;

    .row-2-left {
      width: 70%;
      height: 100%;

      .CropTurnoverRateChartBox {
        display: flex;
        height: calc(100% - 32px);
        width: 100%;

        .StoppageTimeAnalysisLeft {
          width: 50%;
          height: 100%;
          border: 1px solid #ddd;
        }

        .StoppageTimeAnalysisRight {
          width: 50%;
          height: 100%;
          border: 1px solid #ddd;
        }
      }
    }

    .row-2-right {
      width: 29%;
      margin-left: 1%;
      height: 100%;
      overflow: hidden;

      .PerformanceOEE-detailBox {
        height: calc(100% - 32px);
        display: flex;
        flex-direction: row;
        flex: 1;

        border-top: 1px solid #ddd;

        .PerformanceOEE-detailBox-left {
          display: flex;
          width: 50%;
          height: 100%;
          flex: 1;
          flex-direction: column;
          justify-content: space-around;

        }

        .PerformanceOEE-detailBox-right {
          display: flex;
          width: 50%;
          flex: 1;
          height: 100%;
          flex-direction: column;
          justify-content: space-around;
        }


      }
    }
  }

  .performance-header {
    display: inline-block;
    width: 50%;
    text-align: center;
  }

}
</style>